<template>
	<section class="content">
		<!-- <navbar :title="$t('h_title.tixian')" :right_show="false" :type="1" ref="navbar"></navbar> -->
		<topHeader></topHeader>
		<section class="cont">
			<div class="zhanghuyueBox" v-if="false">
				<div class="leftsdsa">
					<div class="titleBox">
						<img src="../assets/images/zhanghuyue.png" alt="">
						{{$t('gerenzhongxin.zhanghuyue')}}
					</div>
					<div class="leftsad">
						{{user.money}}
					</div>
					<p>{{$t('erduzhuanhuan.shengyu')}}{{user.ml_money}}</p>
				</div>
				<div class="rightdsf">
					<img src="../assets/images/g.png" alt="">
					<!-- <router-link to="/exchange" class="zijinhuishou"> -->
					<div class="zijinhuishou" @click="fun_zijinhuishou">
						{{$t('gerenzhongxin.zijinhuishou')}}
					</div>
					<!-- </router-link> -->
				</div>
			</div>
			<div class="newul">
				<div class="newli" @click="getbankShow()">
					<i></i>
					<div>{{$t('newList.title91')}}{{$t('newList.title92')}}</div>
				</div>
			</div>
			<div class="shurukuangBox">
				<div class="item1">
					<div class="item1_item" :class="form.bank_name == 1 ? 'active':''" v-if="user.bank"
						@click="form.bank_name = 1">
						<i></i>
						<div>{{$t('newList.title92')}}</div>
					</div>
					<div class="item1_item" :class="form.bank_name == 2 ? 'active':''" v-if="user.fps"
						@click="form.bank_name = 2">
						<i></i>
						<div>{{$t('newList.title93')}}</div>
					</div>
					<div class="item1_item" :class="form.bank_name == 3 ? 'active':''" v-if="user.fps_id"
						@click="form.bank_name = 3">
						<i></i>
						<div>{{$t('newList.title94')}}</div>
					</div>
					<div class="item1_item" :class="form.bank_name == 5 ? 'active':''" v-if="user.fpsemail_bankid"
						@click="form.bank_name = 5">
						<i></i>
						<div>{{$t('newList.title143')}}</div>
					</div>
					<div class="item1_item" :class="form.bank_name == 4 ? 'active':''" v-if="user.username4"
						@click="form.bank_name = 4">
						<i></i>
						<div>USDT</div>
					</div>
				</div>
				<!-- <div class="item">
					<p>{{$t('newList.title51')}}</p>
					<select v-model="form.bank_name"
						style="width: 100%;background: none;border:none;color:#b69361;padding-left: 10px;">
						<option selected class="blue" value="0">{{$t('newList.title81')}}</option>
						
						<option selected class="blue" value="1" v-if="user.bank">{{$t('newList.title92')}}</option>
						<option selected class="blue" value="2" v-if="user.fps">{{$t('newList.title93')}}</option>
						<option selected class="blue" value="3" v-if="user.fps_id">{{$t('newList.title94')}}</option>
						<option selected class="blue" value="4" v-if="user.username4">USDT</option>
					</select>
				</div> -->
				<p>{{$t('newList.title76')}}</p>
				<div class="item">
					<input v-model="form.money" :placeholder="$t('newList.title76')">
				</div>
				<p>{{$t('newList.title85')}}：</p>
				<div class="item">
					<input v-model="form.qk_pwd" :placeholder="$t('newList.title85')" type="password">
				</div>
			</div>
			<div class="buttBoxss" @click="fun_submit">
				{{$t('newList.title78')}}
			</div>
			<div class="newbottom">
				<div>
					<span style="color: #fff;">{{$t('gerenzhongxin.zhanghuyue')}}：</span>
					<span style="font-size: 16px;font-weight: bold;">{{user.money}}</span>
				</div>
				<div>
					<span style="color: #fff;">{{$t('erduzhuanhuan.shengyu')}}：</span>
					<span style="font-size: 16px;font-weight: bold;">{{user.ml_money}}</span>
				</div>
			</div>
			<!-- <div class="dsfdsf">
				<div class="remarkBox">
					<p>{{$t('newList.title79')}}</p>
					<article
						style="line-height: 30px;font-size: 14px;	z-index: 99;text-align: left;padding: 0px 5px;color: #a3a3a3;">
						{{$t('newList.title80')}}
					</article>
				</div>
			</div> -->

			<!-- <article>
                <span>提现管道 </span>
                <select v-model="form.bank_name" style="width:6rem;background: none;border:none;color:#fff" >
					<option value="转速快" selected>转速快</option>
					                                            <option value="USDT">USDT</option>
					                                            <option value="中国工商银行">中国工商银行</option>
					                                            <option value="中国建设银行">中国建设银行</option>
					                                            <option value="中国农业银行">中国农业银行</option>
					                                            <option value="中国银行">中国银行</option>
					                                            <option value="中国交通银行">中国交通银行</option>
					                                            <option value="招商银行">招商银行</option>
					                                            <option value="广发银行">广发银行</option>
					                                            <option value="平安银行">平安银行</option>
					                                            <option value="浦发银行">浦发银行</option>
					                                            <option value="民生银行">民生银行</option>
					                                            <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
					                                            <option value="华夏银行">华夏银行</option>
					                                            <option value="深圳发展银行">深圳发展银行</option>
					                                            <option value="中信银行">中信银行</option>
					                                            <option value="兴业银行">兴业银行</option>
					                                            <option value="光大银行">光大银行</option>
					                                            <option value="渣打银行">渣打银行</option>
					                                            <option value="汇丰银行">汇丰银行</option>
					                                            <option value="中兴银行">中兴银行</option>
					                                            <option value="恒生银行">恒生银行</option>
					                                            <option value="创新银行">创新银行</option>
				</select>
            </article>
            <article>
                <span>姓名 </span>
                <input  v-model="form.name" >
            </article>
            <article>
                <span>收款账号 </span>
                <input  v-model="form.bank_card" >
            </article>
			<article>
			    <span>提款金额 </span>
			    <input  v-model="form.money" >
			</article>
			<article>
			    <span>提款密码 </span>
			    <input type="password" v-model="form.qk_pwd" >
			</article>
			<article style="color:rgb(217, 217, 25)">
			    剩餘碼量:    {{user.ml_money}}
			</article>
            <button @click="fun_submit">{{$t('common.queren')}}</button>
			<article style="line-height: 1.8;font-size: 14px;text-align: left;margin: 20px 0;">
			    如提現出現打碼量不足,而您的流水已經超過了充值金額的八倍,請您稍後再來提現,因為遊戲方下注數據沒有返還到本現金站,造成您的流水不能及時更新,造成的不便請您諒解,或者聯系線上客服！
			</article> -->
		</section>
		<bottom></bottom>
		<van-popup v-model="bankShow" class="iframe_alert">
			<div class="wind">
				<section class="input-list">
					<div>
						<span>{{$t('newList.title99')}}</span>
					</div>
					<article>
						<select class="form-custom" v-model="bankType" @change="changes"
							style="background: none;color: #000;height: 1rem;border: none;width: 100%;padding-left: 10px;">
							<option value="1">{{$t('newList.title92')}}</option>
							<option value="2">{{$t('newList.title93')}}</option>
							<option value="3">{{$t('newList.title94')}}</option>
							<option value="5">{{$t('newList.title143')}}</option>
							<option value="4">USDT</option>
						</select>
					</article>
				</section>
				<section class="input-list">
					<div>
						<span>{{$t('newList.title100')}}</span>
					</div>
					<article>
						<input type="text" v-model="cardForm.userName" :placeholder="$t('newList.title101')">
					</article>
				</section>
				<section class="input-list" v-show="bankType == 1||bankType == 5">
					<div>
						<span>{{$t('newList.title102')}}</span>
					</div>
					<article>
						<select class="form-custom" v-model="cardForm.bankName"
							style="background: none;color: #000;height: 1rem;border: none;width: 100%;padding-left: 10px;">
							<option v-for="(item) in bankList" :key="item.id" :value="item.id">{{item.bank_name}}
							</option>
						</select>
					</article>
				</section>
				<section class="input-list" v-show="bankType == 2">
					<div>
						<span>{{$t('newList.title103')}}</span>
					</div>
					<article>
						<input type="text" v-model="cardForm.zsk_bank" :placeholder="$t('newList.title112')">
					</article>
				</section>
				<section class="input-list" v-show="bankType != 4">
					<div>
						<span>{{$t('newList.title104')}}</span>
					</div>
					<article>
						<input type="text" v-model="cardForm.cardAccount" :placeholder="$t('newList.title105')">
					</article>
				</section>

				<section class="input-list" v-show="bankType == 4">
					<div>
						<span>{{$t('newList.title111')}}</span>
					</div>
					<article>
						<input type="text" v-model="cardForm.cardAccount" :placeholder="$t('newList.title111')">
					</article>
				</section>
				<div class="flex">
					<div class="bang" v-show="showbtn" @click="submitCard">{{$t('newList.title91')}}</div>
					<div class="qu" @click="canle">{{$t('newList.title106')}}</div>
				</div>
			</div>
		</van-popup>
	</section>
</template>

<script>
	import Bottom from "@/components/bottom"
	import navbar from "@/components/navbar"
	import topHeader from "@/components/topHeader"
	import {
		CountDown
	} from 'vant'
	export default {
		name: "tixian",
		components: {
			navbar,
			Bottom,
			topHeader,
			[CountDown.name]: CountDown
		},
		mounted() {
			this.nav_onLoad()
		},
		data() {
			return {
				form: {
					bank_name: 0,
					name: '',
					bank_card: '',
					money: '',
					qk_pwd: '',
				},
				user: {},
				bankShow: false,
				bankType: 1,
				cardForm: {
					userName: "",
					bankName: "",
					cardAccount: "",
					zsk_bank: ""
				},
				showbtn: true,
				bankList: [],
				cardList: [],
			}
		},
		methods: {
			fun_submit() { ///确认
				if (this.form.bank_name == '') {
					this.$toast(this.$t('newList.title81'))
				} else if (this.form.money == 0) {
					this.$toast(this.$t('common.qingshuru') + this.$t('newList.title84'))
				} else if (this.form.qk_pwd == 0) {
					this.$toast(this.$t('common.qingshuru') + this.$t('newList.title85'))
				} else {
					this.$https.fetchPost('/m/drawing', this.form).then(res => {
						this.$toast(res.status.msg)
						setTimeout(() => {
							this.$router.push('betrecord')
						}, 1000)
					}).catch(err => {
						this.$toast(this.$t('newList.title50'));
					})
				}
			},
			getbankShow(){
				this.bankShow=true;
				if (this.bankType == 1) {
					if (this.cardList[0].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[0].userName
					this.cardForm.cardAccount = this.cardList[0].cardAccount
					this.cardForm.zsk_bank = this.cardList[0].zsk_bank
					this.cardForm.bankName = this.cardList[0].bankName
				}
			},
			nav_onLoad() {
				this.$https.fetchGet('/m/personal', {}).then(res => {
					let data = res.data
					this.user = {};
					this.$store.commit('user', data.member)
					this.user = data.member
					this.getbanklist();
					this.loadInfo();
					if (this.user.bank) {
						this.form.bank_name = 1
					}
				})
			},
			loadInfo() {
				// this.shuju = [];
				// if (this.user.username1 == null) {
				// 	this.shuju.push(0);
				// } else {
				// 	this.shuju.push(1);
				// }
				// if (this.user.username2 == null) {
				// 	this.shuju.push(0);
				// } else {
				// 	this.shuju.push(1);
				// }
				// if (this.user.username3 == null) {
				// 	this.shuju.push(0);
				// } else {
				// 	this.shuju.push(1);
				// }
				// if (this.user.username4 == null) {
				// 	this.shuju.push(0);
				// } else {
				// 	this.shuju.push(1);
				// }
				this.cardList = [{
						Id: 1,
						cardAccount: this.user.card,
						userName: this.user.username1,
						bankName: this.user.bank
					},
					{
						Id: 2,
						cardAccount: this.user.fps,
						userName: this.user.username2,
						zsk_bank: this.user.zsk_bank
					},
					{
						Id: 3,
						cardAccount: this.user.fps_id,
						userName: this.user.username3
					},
					{
						Id: 4,
						cardAccount: this.user.usdt_address,
						userName: this.user.username4
					},
					{
						Id: 5,
						cardAccount: this.user.fpsemail_code,
						userName: this.user.fpsemail_username,
						bankName: this.user.fpsemail_bankid
					},
				];
				// this.cardForm.userName = this.user.username1
				// this.cardForm.cardAccount = this.user.card
				// this.cardForm.bankName = this.user.bank
				if (this.cardList[0].cardAccount) {
					this.showbtn = false
				} else {
					this.showbtn = true
				}
			},
			getbanklist() {
				this.$https.fetchGet("/m/banklist", {}).then((res) => {
					this.bankList = res.data;
					if (res.data.length > 0) {
						this.cardForm.bankName = res.data[0].id
					}
					console.log(res.data);
				});
			},
			fun_zijinhuishou() { ///资金回收
				this.$https.fetchPost('/member/transfer_all', {}).then(res => {
					this.nav_onLoad()
				}).catch(err => {
					this.$toast(this.$t('newList.title50'));
				})
			},
			changes(e) {
				let type = e.target.value;
				if (type == 2) {
					if (this.cardList[1].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[1].userName
					this.cardForm.cardAccount = this.cardList[1].cardAccount
					this.cardForm.zsk_bank = this.cardList[1].zsk_bank
					this.cardForm.bankName = this.cardList[1].bankName
				} else if (type == 3) {
					if (this.cardList[2].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[2].userName
					this.cardForm.cardAccount = this.cardList[2].cardAccount
					this.cardForm.zsk_bank = this.cardList[2].zsk_bank
					this.cardForm.bankName = this.cardList[2].bankName
				} else if (type == 1) {
					if (this.cardList[0].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[0].userName
					this.cardForm.cardAccount = this.cardList[0].cardAccount
					this.cardForm.zsk_bank = this.cardList[0].zsk_bank
					this.cardForm.bankName = this.cardList[0].bankName
				} else if (type == 4) {
					if (this.cardList[3].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[3].userName
					this.cardForm.cardAccount = this.cardList[3].cardAccount
					this.cardForm.zsk_bank = this.cardList[3].zsk_bank
					this.cardForm.bankName = this.cardList[3].bankName
				} else if (type == 5) {
					if (this.cardList[4].cardAccount) {
						this.showbtn = false
					} else {
						this.showbtn = true
					}
					this.cardForm.userName = this.cardList[4].userName
					this.cardForm.cardAccount = this.cardList[4].cardAccount
					this.cardForm.zsk_bank = this.cardList[4].zsk_bank
					this.cardForm.bankName = this.cardList[4].bankName
				}
			},
			submitCard() {
				if (!this.cardForm.userName) {
					this.$toast(this.$t('newList.title107'))
				} else if (this.bankType == 1 && !this.cardForm.bankName) {
					this.$toast(this.$t('newList.title108'))
				} else if (this.bankType == 2 && !this.cardForm.zsk_bank) {
					this.$toast(this.$t('newList.title109'))
				} else if (!this.cardForm.cardAccount && this.bankType != 4) {
					this.$toast(this.$t('newList.title110'))
				} else if (this.bankType == 4 && !this.cardForm.cardAccount) {
					this.$toast(this.$t('newList.title111'))
				} else if (this.cardForm.cardAccount) {
					var data = {};
					if (this.bankType == 4) {
						data.type = 4;
						data.username4 = this.cardForm.userName;
						data.usdt_address = this.cardForm.cardAccount;
					} else if (this.bankType == 5) {
						data.type = this.bankType;
						data.fpsemail_bankid = this.cardForm.bankName;
						data.fpsemail_code = this.cardForm.cardAccount;
						data.fpsemail_username = this.cardForm.userName;
					} else {
						data = {
							type: this.bankType,
							username: this.cardForm.userName,
						};
						switch (Number(this.bankType)) {
							case 1:
								data.bank = this.cardForm.bankName;
								data.card = this.cardForm.cardAccount;
								break;
							case 2:
								data.zsk_bank = this.cardForm.zsk_bank;
								data.fps = this.cardForm.cardAccount;
								break;
							case 3:
								data.fps_id = this.cardForm.cardAccount;
								break;
						}
					}
					console.log(data)
					this.$https.fetchPost("/m/set_bank", data).then((res) => {
						if (res.status.errorCode === 0) {
							this.$toast(res.status.msg);
							this.user = res.data;
							this.loadInfo();
							this.canle();
							this.bankType = 1;
						}
					});
				}
			},
			canle() {
				this.bankShow = false;
			},
		}
	}
</script>

<style scoped lang="less">
	/deep/.van-hairline--bottom::after {
		border-bottom-width: 0px !important;
	}

	select {
		appearance: none;
		-webkit-appearance: none;
		border: none
	}

	select:focus-visible {
		/* outline: -webkit-focus-ring-color auto 1px; 这是谷歌浏览器的原生样式*/
		outline: none;
	}

	.blue {
		color: #333;
	}

	.zhanghuyueBox {
		width: 100%;
		height: 190px;
		background-image: url('../assets/images/f.png');
		background-repeat: no-repeat;
		background-size: 100% 180px;
		background-position: 0 -60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 20px 0px 35px;
		box-sizing: border-box;

		.leftsdsa {
			.titleBox {
				display: flex;
				align-items: center;
				font-size: 18px;
				color: #fed339;

				img {
					width: 20px;
					height: 23px;
					margin-right: 5px;
				}
			}

			.leftsad {
				width: 105px;
				height: 40px;
				line-height: 40px;
				color: #fff;
				padding-left: 25px;
				font-size: 20px;
				margin: 15px 0px 5px;
				border-radius: 0px 5px 5px 0px;
				background-image: url('../assets/images/yue.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			p {
				font-size: 13px;
				margin-left: 20px;
				color: #fff;
			}
		}

		.rightdsf {
			display: flex;
			flex-direction: column;
			justify-content: center;

			img {
				width: 90px;
				height: 75px;
				margin-bottom: 7px;
			}

			.zijinhuishou {
				padding: 2px 8px !important;
				color: #fff;
				font-size: 13px;
				background: linear-gradient(#770c17, #441418);
				border-radius: 3px;
			}
		}
	}

	.shurukuangBox {
		width: 92%;
		margin: 0px auto;

		p {
			font-weight: 700;
			display: block;
			font-size: 14px;
			text-align: left;
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.item {
			display: flex;
			align-items: center;
			height: 35px;
			border-radius: 5px;
			overflow: hidden;
			margin-bottom: 10px;
			background: #fff;

			input {
				width: 100%;
				padding-left: 10px;
				height: 33px;
				font-size: 15px;
				background: none;
				color: #333;
				border: 0px;
			}
		}
	}

	.buttBoxss {
		width: 92%;
		height: 35px;
		color: #fff;
		font-size: 13px;
		line-height: 35px;
		margin: 0px auto;
		margin-top: 20px;
		background: #f49623;
		border-radius: 3px;
	}

	.dsfdsf {
		min-height: 350px;
		background-image: url('../assets/images/e.png');
		background-repeat: no-repeat;
		background-size: 100% 350px;
		background-position: 0 70px;

		.remarkBox {
			width: 90%;
			margin: 20px auto 0px;
			position: relative;

			p {
				width: 50px;
				text-align: center;
				height: 20px;
				color: #333;
				font-size: 12px;
				background: linear-gradient(#f5d64c, #f5bb19);
				border-radius: 3px;
				padding-top: 2px;
				margin-bottom: 10px;
			}

			img {
				width: 100%;
				height: auto;
				position: absolute;
				top: 50px;
				left: 0px;
				z-index: 0;
			}
		}
	}



	.content {
		height: 100%;
		min-height: 100vh;
		background-color: #333333;

		.cont {
			color: #fff;

			&>article {
				width: 98%;
				margin: 0 auto;
				display: flex;
				padding: 0 .4rem;
				border-bottom: 1px solid #292d30;
				font-size: .4rem;
				line-height: 1.6rem;

				span {
					display: block;
					width: 20%;
					text-align: left;
				}

				input {
					width: 55%;
					color: #fff;
					border: none;
					background: transparent;
				}

				article {
					color: #fff;
					width: 26%;
					display: flex;
					align-items: center;

					div {
						color: #fff;
						margin-right: .1rem;
					}
				}
			}

			&>button {
				background: linear-gradient(to bottom, #eb5d4d 0%, #fb2464 100%) !important;
				font-size: .46rem;
				border-radius: .2rem;
				width: 92%;
				margin: 0rem auto 0;
				border: none;
				line-height: 1.5rem;
			}
		}

	}

	.newul {
		width: 100%;
		padding: 16px;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.newli {
			position: relative;
			width: calc(33.3333333333% - 6px);
			min-height: 80px;
			padding: 0 4px;
			margin: 0 0 6px 5px;
			border: 3px solid #f49623;
			border-radius: 5px;
			box-sizing: border-box;

			i {
				display: block;
				width: 80px;
				height: 80px;
				margin: -15px auto;
				background-color: #f9bb1f;
				transform: scale(.45);
				mask: url('../assets/newimg/bank.svg') no-repeat center;
			}

			div {
				font-size: 14px;
			}
		}
	}

	.item1 {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.item1_item {
			width: 110px;
			height: 36px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 4px 4px 4px;
			border-radius: 10px;
			background-color: #9f9797;

			i {
				width: 30px;
				height: 30px;
				background-color: #fff;
				mask-image: url('../assets/newimg/bank1.svg');
				mask-size: contain;
				mask-position: center;
				mask-repeat: no-repeat;
			}

			div {
				margin-left: 4px;
				font-size: 14px;
			}
		}

		.item1_item.active {
			background-color: #f49623;
		}
	}

	.newbottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		box-sizing: border-box;

		div {
			color: #f49623;
			font-size: 14px;
		}
	}

	.iframe_alert {
		border-radius: 0.2rem;
		width: 76%;
		background-color: #222222;
		border-radius: 15px;
		padding: 15px;
		box-sizing: border-box;

		.wind {
			width: 100%;

			&>section {
				// display: flex;
				font-size: .34rem;
				// border-bottom: 1px solid rgb(41, 45, 48);
				// align-items: center;
				// border: .01rem solid #bca015;
				overflow: hidden;

				&>div {
					width: 100%;
					margin: 10px 0;
					text-align: left;

					&>span {
						color: #fff;
						display: block;
						width: 100%;
						position: relative;
					}
				}

				&>article {
					width: 100%;
					height: 35px;
					text-align: center;
					border-radius: 6px;
					background-color: #fff;

					input {
						width: 100%;
						height: 33px;
						line-height: 33px;
						background-color: #fff;
						border: none;
						color: #000;
						border-radius: 6px;
						padding-left: 10px;
					}

					p {
						display: flex;
						// border:1px solid red;
						width: 6.3rem;
						justify-content: left;
						padding: .2rem .2rem;
						float: left;

						img {
							width: .5rem;
							height: .5rem;
							margin-right: 5px;
						}

						span {
							color: #000;
						}
					}
				}
			}

			select option {
				background-color: #000;
				color: #fff;
			}

			.btn {
				background: linear-gradient(to bottom, #e03521 0%, #4a120c 100%) !important;
				width: 96%;
				margin: .8rem auto 0;
				color: #fff;
				line-height: 0.9rem;
				text-align: center;
				font-size: .4rem;
				display: block;
				border-radius: .2rem;
			}

			.flex {
				margin-top: 20px;
				// display: flex;
				// justify-content: flex-end;
				// align-items: center;
			}

			.bang {
				width: 100%;
				height: 35px;
				line-height: 35px;
				text-align: center;
				font-size: 14px;
				color: #fff;
				background: #f49623;
				border-radius: 6px;
				margin-top: 10px;
			}

			.qu {
				width: 100%;
				height: 35px;
				line-height: 35px;
				color: #000;
				text-align: center;
				font-size: 14px;
				border-radius: 6px;
				background-color: #fff;
				margin-top: 10px;
			}
		}
	}

	.heng {
		width: 100%;
		height: 28px;
		position: relative;
		margin-top: -12px;

		&>img {
			width: 50%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.hengcon {
			width: 100%;
			height: 28px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 18px;
			z-index: 1;
			position: absolute;
			top: 0;
			left: 0;

			img {
				width: 20px;
				margin-right: 8px;
			}

			div {
				font-size: 14px;
				color: #000;
				font-weight: bold;
			}
		}
	}

	.beizhu {
		margin-top: 20px;
		padding: 0 20px;

		.beizhutitle {
			width: 60px;
			background: linear-gradient(to bottom, #fed747 0%, #fbba23 100%);
			height: 22px;
			text-align: center;
			line-height: 24px;
			font-size: 12px;
			color: #000;
			border-radius: 5px;
		}

		.beizhucon {
			margin-top: 14px;
			font-size: 14px;
			color: #fff;
			line-height: 24px;
			text-align: left;
		}
	}
</style>